<template>
  <div class="ticketbag-detail">
    <div class="detail-table">
      <Row>
        <Col span="24" class="detail-table__col detail-table__title">
          券包详情
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">编号：</span>
          <span class="detail-table__content--3">{{ formInfo.gameCouponCode }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">状态：</span>
          <span class="detail-table__content--3">{{ getEnumsName(formInfo.status, selectedList) }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">名称：</span>
          <span class="detail-table__content--3">{{ formInfo.name }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--4">副标题：</span>
          <span class="detail-table__content--4">{{ formInfo.title }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">价格：</span>
          <span class="detail-table__content--3">{{ priceInfo.configValue }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">局数：</span>
          <span class="detail-table__content--3">{{ roundInfo.configValue }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">门店：</span>
          <span class="detail-table__content--3">{{ formInfo.shopName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">销售渠道：</span>
          <span class="detail-table__content--5">{{ (formInfo.salesChannelName || []).join('/') }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--5">可选项目：</span>
          <span class="detail-table__content--5">{{ projects.map(item => item.machineName).join('、') }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--5">项目设置：</span>
          <span class="detail-table__content--5">{{ projects.map(item => item.machineName + '/' + item.count + '局').join('、') }}</span>
        </Col>
      </Row>
      <Row>
        <template v-if="formInfo.salesType === 1">
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--7">购买数量限制：</span>
            <span class="detail-table__content--7">{{ formInfo.timeUnitLimit ?  getEnumsName(formInfo.timeUnitLimit, timeUnitLimits) + '/' + formInfo.buyLimit + '份' : getEnumsName(formInfo.timeUnitLimit, timeUnitLimits) }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--5">销售形式：</span>
            <span class="detail-table__content--5">单独销售</span>
          </Col>
        </template>
        <template v-else>
          <Col span="24" class="detail-table__col">
            <span class="detail-table__label--5">销售形式：</span>
            <span class="detail-table__content--5">打包销售</span>
          </Col>
        </template>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--4">有效期：</span>
          <span class="detail-table__content--4">{{ formInfo.validDays ? formInfo.validDays + '天' : formatTime(formInfo.validStart) + '一' + formatTime(formInfo.validEnd) }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">上架时间：</span>
          <span class="detail-table__content--5">{{ formatTime(formInfo.listingTime) }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">下架时间：</span>
          <span class="detail-table__content--5">{{ formatTime(formInfo.delistingTime) }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">创建时间：</span>
          <span class="detail-table__content--5">{{ (formInfo.createdAt || '').replace(/-/g, '/') }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">编辑时间：</span>
          <span class="detail-table__content--5">{{ (formInfo.updatedAt || '').replace(/-/g, '/') }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--5">商品详情：</span>
          <span class="detail-table__content--5" v-html="formInfo.detail"></span>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--3">备注：</span>
          <span class="detail-table__content--3">{{ formInfo.remark }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--5">商品主图：</span>
          <span v-if="formInfo.imgUrl" class="detail-table__content--5"><img :src="formInfo.imgUrl" width="96" alt=""></span>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { getSubcardDetail } from '@/api/market/game-ticket/subcardTicketbag.js'
import enumsMixin from '../enums'
export default {
  name: 'market_gameticket_ticketbag_detail',
  mixins: [enumsMixin],
  data () {
    return {
      formInfo: {},
      priceInfo: {},
      roundInfo: {},
      projects: []
    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      const query = this.$route.query
      this.id = query.id
      this.shopId = query.shopId
      if (this.id) {
        getSubcardDetail({
          shopId: this.shopId,
          gameCouponCode: this.id
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            const form = result.data || {}
            this.formInfo = form
            this.priceInfo = form.price || {}
            this.roundInfo = form.round || {}
            this.projects = form.machineDetail || {}
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      }
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.ticketbag-detail {
  padding: 40px 80px
}
</style>
